<template>
  <div>
    
    <div class="isHeng">
      请调整手机到竖屏阅览效果最佳
    </div>

    <header class="HeaderWap">
      <span class="wNav" @click="wapNavOpen"><i></i></span>
      <div class="wLogo">
        <router-link  tag="a"  to="/">
          <p class="title">MiMi Market</p>
          <p class="txtle">一间专注于食品百货的杂货店</p>
        </router-link>
      </div>
      <span class="wCart" v-if="login" @click="goCart">(£{{wapCartPrice|priceTow}})</span>
      <span class="wCart" v-else @click="goCart">(0)</span>
    </header>

    <nav class="navWap" v-if="wapNav">
        <span class="closeNav" @click="wapNavClose"></span>
        <ul>
          <li @click="wapNavGo(item.id)" v-for="(item,index) in navData">{{item.category_name}}</li>
        </ul>
        <p v-if="!login" class="navLogin"><a @click="goLogin">登录</a>｜<a @click="goRegister">注册</a></p>
        <p v-if="login" class="navLogin"><a @click="goAbout">个人中心</a>｜<a @click="goOut">退出</a></p>
    </nav>
    <section class="searchWap">
      <input type="text" v-model="search" name="">
      <span class="searchClick" @click="searchEnt"></span>
    </section>

  </div>
</template>
<script>
import axios from 'axios'
import { mapState } from 'vuex'
import {Get} from '@/config/api.js'
import vcartTop from '@/components/cartTop'

export default {
  name: 'header',
  data() {
    return {
      title: '一间专注于食品百货的杂货店',
      navData:'',
      search:'',//搜索
      searchStart:false,//搜索框下拉状态
      searchList:[],//搜索记录
      cartStart:false,
      focusStatus:false,
      cartList:'',//购物车列表
      navStart:false,
      id:1,
      wapNav:false,
      wapPriceCart:''
    }
  },
  mounted(){
    this.getNav()
    //this.getNowWap()
  },
  watch:{
    search(){
      if(this.search.length>0){
        this.searchStart=false
      }
    }
  },
  created:function(){
    if(!this.isPC()){
      this.getNowWap()
    }
  },
  computed: {
    ...mapState({
      login: state => state.login,
      headerH: state => state.headerH,
      headerShow: state => state.headerShow,
      cartShow: state => state.cartStart,
      wapCartNum: state => state.wapCartNum,
      wapCartPrice: state => state.wapCartPrice
    }),
    wapPrice(){
      let all=0;
      let len=this.wapPriceCart.length
      for(let i=0;i<len;i++){
        all+=this.wapPriceCart[i].amount
      }
      return all
    }
  },
  filters:{
    priceTow(val){
      return val.toFixed(2); 
    }
  },
  components:{
    vcartTop
  },
  methods: {
    isPC () {
      let userAgentInfo = navigator.userAgent;
      let Agents = ["Android", "iPhone",
                  "SymbianOS", "Windows Phone",
                  "iPad", "iPod"];
      let flag = true;
      for (let v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
              flag = false;
              break;
          }
      }
      return flag;
    },
    async getNav(){
        if(this.vCheck()){
          let reg=await Get('/goods/category/all?_sort=category_sort',this.$store.state.token)
          this.navData=reg.data
          this.$store.dispatch("wapNav",reg.data)
          let that=this
          this.navData.forEach(function (value,i) {
              value.son.forEach(function(val,j){
                that.$set(val,'start',false);
              })
              that.$set(value,'start',false);
          });
        }
    },
    //点击查找
    keepLook(){
      if(this.search!=''){
        let look;
        let token;
        let that=this;
        let name = "look" + "=";
        let ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i].split("=");
            if(this.trimStr(c[0])=="look"){
                look=c[1];
                let arr=look.split(',')
                that.searchList=arr.reverse()
            }
        };
        if(look!=undefined){
          token=look+','+this.search
        }else{
          token=this.search
        }
        var d = new Date();
        d.setTime(d.getTime() + (604800000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = "look" + "=" + token + "; " + expires;
        this.$router.push({path:'/prcSearch',query: {id:this.search}})
        this.search=''
      }
    },
    //顶级栏目
    getSon(val){
      let arr=[];
      for(let i=0;i<val.length;i++){
        arr.push(val[i].id)
      }
      return arr
    },
    //搜索框下拉显示
    searchShow(){
        if(this.search.length<1){
          let look;
          let that=this;
          let name = "look" + "=";
          let ca = document.cookie.split(';');
          for (let i = 0; i < ca.length; i++) {
              let c = ca[i].split("=");
              if(this.trimStr(c[0])=="look"){
                  look=c[1];
                  let arr=look.split(',')
                  that.searchList=arr.reverse()
              }
          };
          this.searchStart=true
        }
    },
    //搜索框下拉隐藏
    searchHide(){
        this.searchStart=false
    },
    //搜索框下拉选择
    searchLi(val){
        this.searchStart=false
        this.search=val
        document.getElementById('input').focus()
    },
    searchEnt(){
      if(this.search!=''){
        this.$router.push({path:'/prcSearch',query: {id:this.search}})
        this.search=''
      }
    },
    //点击登录
    loginBox(){
      this.$store.dispatch("loginBox");
    },
    //退出登录
    closeLogin(){
      document.cookie = "login="+"; " +"-1";
      this.$store.dispatch("closelogin");
      this.$router.push({ path: '/'})

    },
    //路由跳转
    wapNavGo(id){
      this.$router.push({ path: '/prcList', query: {top:id }})
      this.wapNav=false
    },
    //去登录
    goLogin(){
      this.$router.push({ path: '/login'})
      this.wapNav=false
    },
    //去注册
    goRegister(){
      this.$router.push({ path: '/register'})
      this.wapNav=false
    },
    //去个人中心
    goAbout(){
      this.$router.push({ path: '/about'})
      this.wapNav=false
    },
    //去购物车
    goCart(){
      if(this.vLogin()){
        this.$router.push({ path: '/cart'})
      }else{
        this.$router.push({ path: '/login'})
      }
      this.wapNav=false
    },
    //去退出
    goOut(){
      document.cookie = "login="+"; " +"-1";
      this.$store.dispatch("closelogin");
      this.$router.push({ path: '/'})
      this.wapNav=false
    },
    //更新购物车信息
    async getNow(){
        let reg=await Get('/carts?_sort=id',this.$store.state.token)
        this.cartList=reg.data
    },
    closeCartTop(){
      document.body.setAttribute("class","");
      this.$store.dispatch("cartClose")
    },
    //wap获取购物车信息
    async getNowWap(){
      if(this.vLogin()){
        let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.wapPriceCart=reg.data
        this.$store.dispatch("wapCart",data)
      }
    },
    //wap
    wapNavOpen(){
      this.wapNav=true
    },
    wapNavClose(){
      this.wapNav=false
    }
  }
}

</script>
